<template>
  <div :class="$style.container">
    <el-card :body-style="{padding:0}">
      <div :class="$style.user">
        <div :class="$style.left">
          <img v-lazy="$api.prefix+$store.state.user.user.avatar">
          <div :class="$style.info">
            <h4>{{ $store.state.user.user.name }}</h4>
            <p>我的id: {{ $store.state.user.user.userId }}</p>
          </div>
        </div>
        <div :class="$style.right">
          <nuxt-link 
            :to="{path: '/user/setting'}" 
            tag="span">个人信息设置
            <i :class="$style.arrow"/>
          </nuxt-link>
          
        </div>
      </div>
      <ul :class="$style.order">
        <nuxt-link 
          :to="{path: '/user/order',query: {id:0}}" 
          tag="li">
          <i :class="[$style.icon,$style.all,'iconfont','icon-order']"/>
          <span>全部订单</span>
        </nuxt-link>
        <nuxt-link 
          :to="{path: '/user/order',query: {id:1}}" 
          tag="li">
          <i :class="[$style.icon,$style.wait,'iconfont','icon-daifukuan']"/>
          <span>待付款</span>
        </nuxt-link>
        <nuxt-link 
          :to="{path: '/user/order',query: {id:2}}" 
          tag="li">
          <i :class="[$style.icon,$style.use,'iconfont','icon-weishiyong']"/>
          <span>待使用</span>
        </nuxt-link>
        <nuxt-link 
          :to="{path: '/user/order',query: {id:3}}" 
          tag="li">
          <i :class="[$style.icon,$style.comment,'iconfont','icon-comment']"/>
          <span>待评论</span>
        </nuxt-link>
      </ul>
    </el-card>
  </div>
</template>

<script>
export default {}
</script>

<style lang='scss' module>
.container {
  .user {
    width: 100%;
    height: 210px;
    background: #e36049;
    background-image: linear-gradient(-90deg, #e36049 3%, #e37b49 98%);
    border-radius: 4px 4px 0 0;
    padding-left: 30px;
    padding-top: 40px;
    box-sizing: border-box;
    &:after {
      display: inline-block;
      content: ' ';
      overflow: hidden;
      clear: both;
    }
    .left {
      float: left;
      img {
        width: 110px;
        height: 110px;
        border: 10px solid #e36049;
        border-radius: 100%;
      }
      .info {
        display: inline-block;
        vertical-align: 40px;
        margin-left: 20px;
        color: #fff;
        h4 {
          margin-bottom: 10px;
          font-size: 26px;
        }
        p {
          font-size: 14px;
        }
      }
    }
    .right {
      float: right;
      span {
        display: inline-block;
        color: #fff;
        font-size: 14px;
        position: relative;
        left: -30px;
        top: 58px;
        cursor: pointer;
      }
      .arrow {
        display: inline-block;
        width: 7px;
        height: 7px;
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
        transform: rotate(45deg);
      }
    }
  }
  .order {
    position: relative;
    width: 100%;
    height: 110px;
    background: #fff;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    &:after {
      display: inline-block;
      content: ' ';
      overflow: hidden;
      clear: both;
    }
    li {
      float: left;
      width: 25%;
      height: 110px;
      line-height: 110px;
      text-align: center;
      cursor: pointer;
      .icon {
        font-size: 32px;
        vertical-align: middle;
      }
      .all {
        color: #13d1be;
      }
      .wait {
        color: #72baff;
      }
      .use {
        color: #ff5e6f;
      }
      .comment {
        color: #ffbd31;
      }
      span {
        margin-left: 5px;
        display: inline-block;
        line-height: 36px;
        text-align: center;
      }
    }
  }
}
</style>
